<template>
      <div class="shows">
        <p class="line"><span class="title">申请人信息</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a @click="applyIN">{{applyINfo?'收起':'展开'}}</a></p>
          <div class="apply" v-show="applyINfo"> 
              <BankDetailApplyPeo :detailTitle="appTitle" ref="applyinfos" :emptyINfo="emptyINfo" :provinceList="provinceList"></BankDetailApplyPeo>
          </div>   
        <p class="line titledis"><span class="title">被申请人信息</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a @click="unapplyIN">{{unapplyINfo?'收起':'展开'}}</a></p>
            <div class="applyed" v-show="unapplyINfo"> 
              <BankDetailPeo :detailTitle="resTitle" ref="resinfos" :provinceList="provinceList" :emptyINfo="emptyINfo"></BankDetailPeo>
            </div>   
        <p class="line titledis"><span class="title">第三人信息</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a @click="dsfapplyIN">{{dsfapplyINfo?'收起':'展开'}}</a></p>
            <div class="thirdPeo" v-show="dsfapplyINfo"> 
              <BankDetailPeo :detailTitle="dsfTitle" ref="dsfinfos" :provinceList="provinceList" :emptyINfo="emptyINfo"></BankDetailPeo>
            </div>
        <p class="line titledis"><span class="title">诉求信息</span></p>
        <div class="simple">
          <div class="PeoInfo">
              <div class="detailJusfy">
                <Form ref="valiteForm" :model="ivs" label-position="left" :label-width="80" class="viewform" :rules="ruleValidate">
                  <FormItem label="案由" prop="caseReason">
                      <Input v-model="ivs&&ivs.caseReason"/>
                  </FormItem>
                  <FormItem label="利息" prop="interest">
                      <Input v-model="ivs&&ivs.interest" type="number"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form ref="valiteapplyForm" :model="ivs" label-position="left" :label-width="80" class="viewform" :rules="ruleValidate">
                  <FormItem label="申请标的" prop="subjectAmount">
                      <Input v-model="ivs&&ivs.subjectAmount" type="number"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form ref="valiteprincipalForm" :model="ivs" label-position="left" :label-width="80" class="viewform" :rules="ruleValidate">
                  <FormItem label="本金" prop="principal">
                      <Input v-model="ivs&&ivs.principal" type="number"/>
                  </FormItem>
                </Form>
              </div>
          </div>
          <div class="PeoInfo">
             <div class="detailJusfy">
                <Form label-position="left" :label-width="80" class="viewform">
                  <FormItem label="证据清单">
                      <Input style="width:300px;" disabled v-model="srcName"/>
                      <!-- <span class="btn uploadlist" @click="addInfo">上传证据</span> -->
                      <Upload
                          :action='uploadurl'
                          :on-success="onSuccess"  
                          :before-upload="onPreview"
                          :on-erroron-error="onError"
                      >
                        <span class="btn uploadlist uploadEvi">上传证据</span>
                      </Upload>
                  </FormItem>
                </Form>
              </div>
          </div>
        </div>

        <div><span class="btn btn-apply" @click="back">返回</span><span class="btn btn-complete" @click="complete">完成</span></div>
               
      </div>
</template>

<script>
import BankDetailPeo from './bankdetailPeo'
import BankDetailApplyPeo from './bankdetailapplyPeo'
export default {
  name: 'BankDetail',
  data(){
     return {
       uploadurl:'/api2'+this.urls.uploadApplicantFile,
       applyINfo:true,
       unapplyINfo:true,
       dsfapplyINfo:true,
       unEvidence:true,
       ivs:{caseReason:'',interest:'',subjectAmount:'',principal:'',uploadPic:''},
       evidence:[],
       appTitle:'申请人',
       resTitle:'被申请人',
       dsfTitle:'第三人',
       appEvidenceList:[],
       resEvidenceList:[],
       dsfEvidenceList:[],
       evilist:'',
      //  uploadPic:'',
       srcName:'',
       emptyINfo:'',
       provinceList:[],
       ruleValidate: {
            caseReason: [
                { required: true, message: '内容不能为空', trigger: 'blur' }
            ],
            interest: [
                { required: true, message: '内容不能为空', trigger: 'blur' }
            ],
            subjectAmount: [
                { required: true, message: '内容不能为空', trigger: 'blur' }
            ],
            principal: [
                { required: true, message: '内容不能为空', trigger: 'blur' }
            ]
       }
     }
  },
  methods:{
    back(){
      this.emptyINfo=Math.random();
      this.ivs={caseReason:'',interest:'',subjectAmount:'',principal:'',uploadPic:''};
      this.srcName='';
      this.$refs['valiteForm'].resetFields();
      this.$refs['valiteapplyForm'].resetFields();
      this.$refs['valiteprincipalForm'].resetFields();
    },
    complete(){
       let applyinfos=this.$refs['applyinfos'].dataApplySave();
       let resinfos = this.$refs['resinfos'].dataSave();
       let dsfinfos=this.$refs['dsfinfos'].dataSave();

       let newapplyinfos={personList:[],companyList:[]};
       let newresinfos = {personList:[],companyList:[]};
       let newdsfinfos={personList:[],companyList:[]};
       
        this.$refs['valiteForm'].validate((valid) => {
            if (!valid) {
                return false;
            }
        })

        this.$refs['valiteapplyForm'].validate((valid) => {
            if (!valid) {
                return false;
            }
        })
        this.$refs['valiteprincipalForm'].validate((valid) => {
            if (!valid) {
                return false;
            }
        })
       
       let appealInfo={
          "caseReason": this.ivs.caseReason,
          "subjectAmount": this.ivs.subjectAmount,
          "principal": this.ivs.principal,
          "interest": this.ivs.interest,
          "evidence": this.ivs.uploadPic
       };
       
       if(applyinfos&&applyinfos.applydetailtype=='1'){          //个人
          applyinfos.areaname=applyinfos.areaname?applyinfos.areaname:'';
          applyinfos.proxy.areaname=applyinfos.proxy.areaname?applyinfos.proxy.areaname:'';
          applyinfos.address=applyinfos.privincename+applyinfos.cityname+applyinfos.areaname+applyinfos.street;
          applyinfos.proxy.proxyAddress=applyinfos.proxy.privincename+applyinfos.proxy.cityname+applyinfos.proxy.areaname+applyinfos.proxy.street;

          // delete applyinfos.applydetailtype;
          // delete applyinfos.cityList;
          // delete applyinfos.areaList;

          newapplyinfos.personList.push(applyinfos);
       }else if(applyinfos&&applyinfos.applydetailtype=='2'){        //公司
          applyinfos.areaname=applyinfos.areaname?applyinfos.areaname:'';
          applyinfos.proxy.areaname=applyinfos.proxy.areaname?applyinfos.proxy.areaname:'';
          applyinfos.companyAddress=applyinfos.privincename+applyinfos.cityname+applyinfos.areaname+applyinfos.street;
          applyinfos.proxy.proxyAddress=applyinfos.proxy.privincename+applyinfos.proxy.cityname+applyinfos.proxy.areaname+applyinfos.proxy.street;

          newapplyinfos.companyList.push(applyinfos);
       }

       if(resinfos.length>0){
          for(let i=0;i<resinfos.length;i++){
            resinfos[i].areaname=resinfos[i].areaname?resinfos[i].areaname:'';
            resinfos[i].proxy.areaname=resinfos[i].proxy.areaname?resinfos[i].proxy.areaname:'';
            if(resinfos[i].detailtype=='1'){
               resinfos[i].address=resinfos[i].privincename+resinfos[i].cityname+
                                  resinfos[i].areaname+resinfos[i].street;
               resinfos[i].proxy.proxyAddress=resinfos[i].proxy.privincename+resinfos[i].proxy.cityname+
                                      resinfos[i].proxy.areaname+resinfos[i].proxy.street;

               newresinfos.personList.push(resinfos[i]);
            }else{
               resinfos[i].companyAddress=resinfos[i].privincename+resinfos[i].cityname+
                                  resinfos[i].areaname+resinfos[i].street;
               resinfos[i].proxy.proxyAddress=resinfos[i].proxy.privincename+resinfos[i].proxy.cityname+
                                      resinfos[i].proxy.areaname+resinfos[i].proxy.street;
               
               newresinfos.companyList.push(resinfos[i]);
            }
          }
       }

       if(dsfinfos.length>0){
          for(let i=0;i<dsfinfos.length;i++){
            dsfinfos[i].areaname=dsfinfos[i].areaname?dsfinfos[i].areaname:'';
            dsfinfos[i].proxy.areaname=dsfinfos[i].proxy.areaname?dsfinfos[i].proxy.areaname:'';
            if(dsfinfos[i].detailtype=='1'){
               dsfinfos[i].address=dsfinfos[i].privincename+dsfinfos[i].cityname+
                                  dsfinfos[i].areaname+dsfinfos[i].street;
               dsfinfos[i].proxy.proxyAddress=dsfinfos[i].proxy.privincename+dsfinfos[i].proxy.cityname+
                                      dsfinfos[i].proxy.areaname+dsfinfos[i].proxy.street;

               newdsfinfos.personList.push(dsfinfos[i]);
            }else{
               dsfinfos[i].companyAddress=dsfinfos[i].privincename+dsfinfos[i].cityname+
                                  dsfinfos[i].areaname+dsfinfos[i].street;
               dsfinfos[i].proxy.proxyAddress=dsfinfos[i].proxy.privincename+dsfinfos[i].proxy.cityname+
                                      dsfinfos[i].proxy.areaname+dsfinfos[i].proxy.street;
              
              //  delete dsfinfos[i].detailtype;
              //  delete dsfinfos[i].isproxy;
              //  delete dsfinfos[i].cityList;
              //  delete dsfinfos[i].areaList;
              //  delete dsfinfos[i].proxy.cityList;
              //  delete dsfinfos[i].proxy.areaList;
               newdsfinfos.companyList.push(dsfinfos[i]);
            }
          }
       }
        // console.log(newapplyinfos)
        if(newapplyinfos.personList.length>0||newapplyinfos.companyList.length>0){
         
          if(appealInfo.caseReason&&appealInfo.interest&&appealInfo.principal&&appealInfo.subjectAmount){

          }else{
            return false;
          }
            this.$http.post('/api2'+this.urls.importArbImport,
              {appInfos:newapplyinfos,
                resInfos:newresinfos,
                dsfInfos:newdsfinfos,
                appealInfo:appealInfo,
              }).then((result)=>{
              
                if(result.data.code==200){
                  this.emptyINfo=Math.random();
                  this.ivs={caseReason:'',interest:'',subjectAmount:'',principal:'',uploadPic:''};
                  this.srcName='';
                  this.$Message.warning('录入成功');
                }else{
                  this.$Message.warning('请求失败');
                }
              }) 
        }else{
            this.$Message.warning('申请人信息不能为空');
        }
        
    },
    handleSubmit () {
      this.$router.push('/Syspage/ApplySecondForm')
    },
    applyIN(){
      this.applyINfo=!this.applyINfo;
    },
    unapplyIN(){
      this.unapplyINfo=!this.unapplyINfo;
    },
    dsfapplyIN(){
      this.dsfapplyINfo=!this.dsfapplyINfo;
    },
    unEvidenceM(){
      this.unEvidence=!this.unEvidence;
    },
    onPreview(){
      this.$Spin.show({
          render: (h) => {
              return h('div', [
                  h('Icon', {
                      'class': 'demo-spin-icon-load',
                      props: {
                          type: 'ios-loading',
                          size: 60
                      }
                  }),
                  h('div', 'Loading')
              ])
          }
      });
    },
    onError(){
       this.$Spin.hide();
       this.$Message.error('上传失败');
    },
    onSuccess(res){
      if(res.code==200){
          this.$Spin.hide();
          this.$Message.success('上传成功');
          this.ivs.uploadPic=res.data[0].showAdress;
          this.srcName=res.data[0].srcName;
      }else{
          this.$Message.error('上传失败');
      }
      
    }
  },
  components:{BankDetailPeo,BankDetailApplyPeo},
  created(){
    this.$http.get('/api2'+this.urls.getProvince).then((result)=>{
        if(result.data.length>0){
            this.provinceList=result.data;
        }else{
          this.$Message.warning('网络错误');
        }
      })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .show{
    margin:0 20px;
  }

  .peopleshow{
    height: 236px;
    overflow-y: auto;
  }

  .viewform .ivu-form-item{
    margin-left: 22px;
  }
  .evilogo{
    font-weight: 600;
    height: 26px;
    line-height: 26px;
  }
  .evidetail{
    padding-left: 18px;
  }
  .evilist{
    height: 300px;
    border: 1px solid #e6e6e6;
  }
  .evidenceInfo{
    padding: 12px 22px;
    border-bottom: 1px solid #e6e6e6;
  }
  .videnceList{
      display: grid;
      grid-template-columns: 33% 33% 33%;
      margin-top: 16px;
  }
  a{
    margin: 0;
  }
  .PeoInfo{
    display: grid;
    grid-template-columns: 33% 33% 33%;
  }
  .btn-apply{
    margin: 18px;
  }
  .uploadlist{
    margin-left: 8px;
  }
  .uploadEvi{
    width: 76px;
    height:25px;
    line-height:25px;
  }
  .ivu-upload{
    display: inline;
  }
</style>
